<template>
  <div class="">
    <info-cell
      :label="infoOption.label"
      :is-require="infoOption.isRequire"
      @click="onClick(infoOption)"
    >
      <template #right>
        <div :class="{'text-gray6' : currentValue.value}" class="ellipsis">
          {{ currentValue.value || '暂未完善' }}
        </div>
      </template>
    </info-cell>
  </div>

  <!-- 普通表单填写 -->
  <Popup
    v-model="isTextShow"
    v-if="isTextShow"
    :title="infoOption.label"
    @onConfirm="onConfirm"
  >
    <div class="input-box flex flex-center">
      <div class="input-text van-hairline--surround">
        <input
          type="text"
          ref="inputRef"
          :placeholder="`请输入${infoOption.label}`"
          :value="currentValue.value"
        >
      </div>
    </div>
  </Popup>

  <!-- 选择弹窗 -->
  <van-popup
    v-if="isPickerShow"
    v-model:show="isPickerShow"
    round
    position="bottom"
  >
    <van-picker
      :columns="infoOption.options"
      @cancel="isPickerShow = false"
      @confirm="onConfirm"
    />
  </van-popup>

  <!-- 选择日期弹窗 -->
  <van-popup
    v-if="isDateShow"
    v-model:show="isDateShow"
    round
    position="bottom"
  >
    <van-datetime-picker
      v-model="currentDate"
      :type="infoOption.type"
      title="选择年月日"
      :min-date="minDate"
      :max-date="maxDate"
      @cancel="isDateShow = false"
      @confirm="onConfirm"
    />
  </van-popup>


  <!-- 地区 -->
  <van-popup
    v-if="isAddressShow"
    v-model:show="isAddressShow"
    round
    position="bottom"
  >
    <van-picker
      title="地区"
      :columns="areaData"
      :columns-field-names="{
        text: 'name',
        values: 'code',
        children: 'child',
      }"
      @cancel="isAddressShow = false"
      @confirm="onConfirm"
    />
  </van-popup>
  
  <tag-group
    v-model="isPanelMultiple"
    v-if="isPanelMultiple"
    :data="currentValue.id"
    @confirm="onConfirm"
  />
</template>

<script>
import { computed, reactive, ref, toRaw } from 'vue';
import { useStore } from 'vuex';
import Popup from '@/components/Popup';
import Utils from '@/utils/utils';
import InfoCell from './InfoCell';
import TagGroup from './tagGroup';
import { TYPE } from '../model';
export default {
  inheritAttrs: false,
  components: {
    InfoCell,
    Popup,
    TagGroup
  },
  props: {
    itemData: {
      type: Object,
      default: () => ({})
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const store = useStore();
    const dict = computed(() => store.state.global.dict);
    const infoOption = computed(() => props.itemData);

    const pickerOption = ref([]);

    const currentValue = ref({
      id: infoOption.value.id || undefined,
      value: infoOption.value.value
    });

    const areaData = computed(() => store.state.global.areaList);

    const isTextShow = ref(false);
    const isPickerShow = ref(false);
    const isDateShow = ref(false);
    const isAddressShow = ref(false);
    const isPanelMultiple = ref(false);

    const currentDate = ref(null);
    const inputRef = ref(null);

    const dateRange = reactive({
      minDate: new Date(1900, 1, 1),
      maxDate: new Date(new Date().getFullYear() + 2, 0, 0)
    });

    const onTextClick = () => {
      setTimeout(() => {
        isTextShow.value = true;
      });
    };

    const onPickerClick = () => {
      pickerOption.value = setTimeout(() => {
        isPickerShow.value = true;
      });
    };

    const onDateClick = () => {
      currentDate.value =
        currentValue.value.value || infoOption.value.value
          ? new Date(currentValue.value.value || infoOption.value.value)
          : new Date();
      setTimeout(() => {
        isDateShow.value = true;
      });
    };

    const onAddressClick = () => {
      setTimeout(() => {
        isAddressShow.value = true;
      });
    };

    const onPanelMultiple = () => {
      setTimeout(() => {
        isPanelMultiple.value = true;
      });
    };

    const onClick = () => {
      if (props.disabled) return;

      const type = infoOption.value.type;

      if (type === TYPE.TEXT) {
        onTextClick();
      } else if (type === TYPE.PICKER) {
        onPickerClick();
      } else if ([TYPE.DATE, TYPE.DATETIME].includes(type)) {
        onDateClick();
      } else if (type === TYPE.ADDRESS) {
        onAddressClick();
      } else if (type === TYPE.PANEL_MULTIPLE) {
        onPanelMultiple();
      }
    };

    const onTextConfirm = () => {
      currentValue.value.value = inputRef.value.value;
      isTextShow.value = false;
    };

    const onPickerConfirm = (val) => {
      currentValue.value.value = val.text;
      currentValue.value.id = val.id;
      isPickerShow.value = false;
    };

    const onDateConfirm = (val) => {
      currentValue.value.value = Utils.date2string(
        val,
        '-',
        infoOption.value.type === TYPE.DATETIME
      );
      isDateShow.value = false;
    };

    const onAddressConfirm = (val) => {
      currentValue.value.value = val
        .filter((item) => item)
        .reduce((cu, item) => (cu += `${item.name} `), '');

      isAddressShow.value = false;
    };

    const onPanelMultipleConfirm = (val) => {
      currentValue.value.value = val.map((item) => item.name).join(',');
      currentValue.value.id = val.map((item) => item.markId);
      isPanelMultiple.value = false;
    };

    // 确认逻辑
    const onConfirm = (args) => {
      const type = infoOption.value.type;
      if (type === TYPE.TEXT) {
        onTextConfirm(args);
      } else if (type === TYPE.PICKER) {
        onPickerConfirm(args);
      } else if ([TYPE.DATE, TYPE.DATETIME].includes(type)) {
        onDateConfirm(args);
      } else if (type === TYPE.ADDRESS) {
        onAddressConfirm(args);
      } else if (type === TYPE.PANEL_MULTIPLE) {
        onPanelMultipleConfirm(args);
      }
    };

    return {
      infoOption,
      isTextShow,
      isPickerShow,
      onClick,
      isDateShow,
      isAddressShow,
      currentDate,
      onConfirm,
      ...toRaw(dateRange),
      currentValue,
      inputRef,
      areaData,
      dict,
      pickerOption,
      isPanelMultiple
    };
  }
};
</script>

<style lang="scss" scoped>
.input-box {
  padding: 0 0 20px;
}
.input-text {
  font-size: 28px;
  width: 80%;
  &:after {
    border-color: #666;
  }
  input {
    width: 100%;
    color: #666;
    padding: 20px;
    border: 0;
    outline: 0;
  }
}
</style>



